<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>会话消息</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--页面共同的CSS，JS-->
    <script src="../../res/js/common/newCommonCssJS.js"></script>
    <link rel="stylesheet" href="../../res/css/messagesV2/chat.css">
</head>


<!--    与chat.html互换-->

<body>
<!--导航部分-->
<section class="indexNav">
    <img id="goBack" class="back" src="../../res/img/common/back.png" alt="">
    <div class="title">消息</div>
    <img class="ltsz" src="../../res/img/messages/lysz.png" alt="">
</section>
<section class="indexChat">
    <div class="indexChatWrap">
        <ul id="chatList" class="chatList"></ul>
    </div>
    <div class="indexBottom">
        <div class="indexChatSendMessage">
            <div id="messageInput" class="messageInput" contenteditable="true"></div>
            <div id="messageBtn" class="messageBtn" >发送</div>
        </div>
        <div class="sendPic">
            <div id="sendImg" class="sendCommon">
                <!--                <label id="chat-tuxiang" title="发送图片" for="inputImage1" class="btn-default-styles">-->
                <!--                    <input type="file" accept="image/*" name="file" class="inputImage" id="inputImage1">-->
                <img src="../../res/img/messages/pic.png" alt="">
                <!--                </label>-->
            </div>
            <div id="shootImg" class="sendCommon">
                <!--                <label title="拍摄图片" for="inputImage2" class="btn-default-styles">-->
                <!--                    <input type="file" accept="image/*" name="file" class="inputImage" id="inputImage2" capture="camera">-->
                <img src="../../res/img/messages/XJ.png" alt="">
                <!--                </label>-->
            </div>
            <!--            <div class="sendCommon">-->
            <!--&lt;!&ndash;                <label title="发送文件" for="inputImage3" class="btn-default-styles">&ndash;&gt;-->
            <!--&lt;!&ndash;                    <input type="file" name="file" class="inputImage" accept=".xls,.doc,.txt,.pdf" id="inputImage3">&ndash;&gt;-->
            <!--                    <img src="../../res/img/messages/WJ.png" alt="">-->
            <!--&lt;!&ndash;                </label>&ndash;&gt;-->
            <!--            </div>-->
            <!--                <div class="sendCommon">-->
            <!--                    <img src="../../res/img/messages/BQ.png" alt="">-->
            <!--                </div>-->
        </div>
        <!--            <div id="preview" class="preview">-->
        <!--                <div class="previewImg">-->
        <!--                    <img src="../../res/img/eggTV/1.png" alt="">-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div id="sendPicBtn" class="sendPicBtn">发送图片</div>-->
        <!--            <div style="margin-right: 0.5rem" id="noSendPicBtn" class="sendPicBtn">取消发送</div>-->
        <!--            <div id="sendFileBtn" class="sendPicBtn">发送文件</div>-->
        <!--            <div style="margin-right: 0.5rem" id="noSendFileBtn" class="sendPicBtn">取消发送</div>-->
    </div>
</section>
</body>
<script src="../../res/js/messagesV2/jmessage-sdk-web.2.6.0.min.js"></script>
<script src="../../res/js/common/IMCommon.js"></script>
<script src="../../res/js/vconsole.min.js"></script>
<script src="../../res/js/messagesV2/chatV2.js?v=1.0.1"></script>
<script>
    // let cConsole = new VConsole();
    console.log('hello word')
</script>
<script>
    let indexChatHeight = $('.indexChat').height();
    let indexBottomHeight = $('.indexBottom').height();
    let indexNavHeight = $('.indexNav').height();
    let indexChatWrapHeight = indexChatHeight - indexBottomHeight - indexNavHeight - 30;
    $('.indexChatWrap,.chatList').css('height',indexChatWrapHeight);
    $('.indexChatWrap').css('margin-top',indexNavHeight);
    //聊天框默认最底部
    $(document).ready(function () {
        $(".chatList").scrollTop($(".chatList")[0].scrollHeight);
    });


    // 预览图片
    $('#inputImage1').on('change',function () {
        $('#preview').removeClass('inputImage2').addClass('inputImage1')
    });
    $('#inputImage2').on('change',function () {
        $('#preview').removeClass('inputImage1').addClass('inputImage2')
    });
    function selectImg(pic) {
        // if (!pic.files || !pic.files[0]) {
        //     return;
        // }
        // if ($('#preview .previewImg').length > 0){
        //     laymsg('最多发送1张图片');
        //     return;
        // }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;
            $('#preview').empty().append('<div class="previewImg">' +
                '                    <img src="'+images+'" alt="">' +
                '                </div>').show();

            $('#sendPicBtn,#noSendPicBtn').show();

            let indexBottomHeight = $('.indexBottom').height();
            let indexChatWrapHeight = indexChatHeight - indexBottomHeight - 30;
            $('.indexChatWrap,.chatList').css('height',indexChatWrapHeight);
            $(document).ready(function () {
                $(".chatList").scrollTop($(".chatList")[0].scrollHeight);
            });
        };
        reader.readAsDataURL(pic.files[0]);
    }
</script>
</html>
